<template>
    <view class="ComponentSelect" ref="componentSelect">
        <!-- 添加最前面的占位元素 -->
        <view class="spacer"></view>
        <!-- 遍历组件图片列表，动态生成组件 -->
        <view
              v-for="(com, i) in componentImgs"
              :class="{ 'component': true, 'active': activeComponent === com.key }"
              @click="setActiveComponent(com.key)"
              :key="i">
            <!-- 根据是否激活显示不同的图片 -->
            <image :src="(activeComponent === com.key) ? com.hoverImg : com.img" class="img" />
            <text class="text">{{ com.name }}</text>
        </view>
        <!-- 添加最后面的占位元素 -->
        <view class="spacer"></view>
    </view>
</template>

<script>
import designerStore from "../../DesignEditor/designerStore";
import { autorun } from "mobx";
import editorStore from "../../editorStore";

export default {
    name: "ComponentSelect",
    data() {
        return {
            componentImgs: [], // 组件图片列表，包含图片、悬停图片、名称等信息
            activeComponent: "", // 当前激活的组件 key
            hasActiveObject: false,
        };
    },
    watch: {
        // 监听 componentImgs 的变化
        componentImgs() {
            this.$nextTick(() => {
                const componentSelect = this.$refs.componentSelect; // 使用 ref 获取元素
                if (componentSelect) {
                    console.log('scrollLeft1: ', componentSelect.scrollLeft);
                    componentSelect.scrollLeft = 0; // 滚动条移动到最左边
                    console.log('scrollLeft2: ', componentSelect.scrollLeft);
                }
            });
        }
    },
    methods: {
        // 设置激活的组件
        setActiveComponent(key) {
            designerStore.setActiveComponent(key);
            editorStore.setSwitchTab(0);
        }
    },
    mounted() {
        // 监听 goodsData 数据变化，更新组件图片列表
        this.dispose = autorun(async () => {
            const { goodsData, goodsDataComponents } = designerStore;
            if (goodsData) {
                const componentImgs = goodsDataComponents
                    .map(c => ({
                        key: c.key,
                        img: c.icon,
                        hoverImg: c.hover_icon,
                        name: c.name
                    }));

                this.componentImgs = [];
                await new Promise(resolve => setTimeout(resolve, 100)); // 延迟更新，模拟异步操作
                this.componentImgs = [
                    ...componentImgs,
                ];
            }
        }, { delay: 10 });

        // 监听 activeComponent 数据变化，更新当前激活组件
        this.dispose1 = autorun(() => {
            const { activeComponent } = designerStore;
            this.activeComponent = activeComponent;
        });

        this.dispose = autorun(() => {
            this.switchTab = editorStore.switchTab; // 切换tab
            this.hasActiveObject = designerStore.activeObjectType;
        }, { delay: 30 })
    },
    destroyed() {
        // 清理 autorun 监听
        this.dispose && this.dispose();
        this.dispose1 && this.dispose1();
    }
};
</script>

<style scoped lang="scss">
.ComponentSelect {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px -4px 4px #e6e6e6;
    padding-bottom: calc(env(safe-area-inset-bottom) + 128px);
    padding-top: 4px;
    overflow-x: auto; // 横向滚动
    white-space: nowrap; // 禁止换行
    flex-wrap: nowrap; // 禁止换行
    overflow-y: hidden; // 禁止上下滚动

    .spacer {
        width: 20px;
        flex-shrink: 0; // 防止被压缩
    }

    .component {
        display: inline-block;
        height: 44px;
        margin: 0 4px;
        padding-top: 4px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #cccccc;

        .img {
            display: block;
            margin: 0 auto;
            width: 24px;
            height: 24px;
        }

        .text {
            width: 50px;
            text-align: center;
            display: inline-block;
            font-size: 12px;
            color: #000000;
        }

        &.active {
            border: 1px solid #FF5E10;

            .text {
                color: #FF5E10;
            }
        }
    }
}
</style>